<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<div>
    <button class="layui-btn" id="addBtn">添加</button>
</div>

<table id="demo" lay-filter="myTableFilter"></table>

<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="test1">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="test2">删除</a>
</script>

<script>

    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;


        //渲染 table表格
        table.render({
            elem: '#demo'
            , url: '${pageContext.request.contextPath}/role/selectPage' //数据接口
            , page: true //开启分页
            , limit: 5
            , limits: [3, 5, 10]
            , cols: [[ //表头
                {field: 'roleId', title: '编号'}
                , {field: 'roleName', title: '角色名'}
                , {title: '操作', toolbar: '#toolbar1'}
            ]]
        });

        //添加弹出框start
        <%--$("#addBtn").click(function () {--%>
            <%--layer.open({--%>
                <%--type:1,--%>
                <%--content:$("#addForm"),--%>
                <%--area:'500px',--%>
                <%--title:'添加管理员'--%>
            <%--})--%>
        <%--})--%>
        <%--//添加弹出框 end--%>

        <%--//添加 start--%>
        <%--form.on("submit(*)",function() {--%>
            <%--var s = $("#addForm").serialize();--%>
            <%--$.ajax({--%>
                <%--url:"${pageContext.request.contextPath}/admin/add",--%>
                <%--data:s,--%>
                <%--dataType:"json",--%>
                <%--success:function(result){--%>
                    <%--if(result.flag){--%>
                        <%--layer.closeAll();--%>
                        <%--layer.msg("添加成功");--%>
                        <%--$("#addForm")[0].reset();--%>
                        <%--table.reload('demo',{--%>
                            <%--//从第几页开始--%>
                            <%--page:{curr:1}--%>
                        <%--})--%>
                    <%--}--%>
                <%--}--%>
            <%--})--%>
            <%--return false;--%>
        <%--})--%>
        //添加 end


        })
</script>
</body>
</html>
